<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2020/1/21
  Time: 23:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>编辑角色权限</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<script src="../../layui/layui.js" charset="utf-8"></script>
<script src="../../js/jquery-3.4.1.js"></script>
<body style="padding: 10px;background-color: rgb(236,240,245);">
    <h1 style="margin-bottom: 20px;">${param.role_name}</h1>
    <input id="role_id" value="${param.role_id}" style="display: none">
    <!-- 表单区+返回按钮 -->
    <div style="background-color: white;">
        <div class="layui-row">
            <!-- 返回按钮 -->
            <div class="layui-col-xs1" style="padding-left: 10px;padding-top: 10px;">
                <a class="layui-btn layui-btn-sm layui-btn-normal" href="/jsp/roleManage/roleManage.jsp">
                    <i class="layui-icon layui-icon-left">返回</i>
                </a>
            </div>
        </div>
        <!-- 角色权利表格 -->
        <table class="layui-hide" id="tb_role_menu"></table>
        <!-- 表格工具列 -->
        <script type="text/html" id="bar_roleEdit">
            <input class="login-input-check" lay-skin="primary" type="checkbox">
        </script>
    </div>
</body>
<script>
    layui.use('form');
    // 表格模块
    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem:'#tb_role_menu',//在指定dom对象上渲染表格
            url:'/roleManage/getMenuList.do',//异步数据接口
            where:{
                role_id:$("#role_id").val()
            },
            title: '角色表',
            cols: [[//表头
                {field:'menu_id', title:'ID',width:'10%'},
                {field:'menu_name', title:'名称'},
                {field:'menu_url', title:'路径'},
                {field:'isShow', title:'是否有权',hide:true},
                {title:'开启权限', toolbar: '#bar_roleEdit'}
            ]],
            done: function(res, curr, count){
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                var data = res.data;//表格数据数组
                var trList = $("#tb_role_menu").next().find(".layui-table-body").find("tr");

                //循环表格每一行数据
                for(i in data){

                    var $chkNode = $(trList[i].childNodes[4]).find("input");//jQuery对象的复选框
                    var $divNode = $chkNode.next();

                    //将菜单id存放在复选框对象中，用于编辑权限
                    $divNode.attr("menu_id",data[i].menu_id);
                    //为复选框绑定点击事件
                    $divNode.click(editPower);

                    //如果是父级菜单，则把背景色设置为米色
                    if(data[i].menu_url == '#'){

                        trList[i].style.backgroundColor="#FFFFE3";
                    }
                    //如果拥有权限，则把复选框勾上
                    if(data[i].isShow == '1'){

                        //将复选框勾上
                        $chkNode.attr("checked","checked");
                        //添加layui复选框的样式
                        $divNode.addClass("layui-form-checked");
                    }
                }
            }
        });
    });

    /**
     * 编辑角色的权利
     * 如果复选框被勾选，则为角色添加该菜单权限
     * 否则移除权限
     */
    function editPower() {

        var isChecked = this.previousSibling.checked;//是否被勾选
        var menu_id = $(this).attr("menu_id");//菜单id
        var role_id = $("#role_id").val();//角色id
        var isShow;//权限：0-无权，1-有权
        //判断复选框是否被勾上
        if(isChecked){
            isShow = 1;
        }else {
            isShow = 0;
        }
        //发送ajax异步请求
        $.ajax({
            url:'/roleManage/editPower.do',
            data:{
                role_id:role_id,
                menu_id:menu_id,
                isShow:isShow
            },
            success:function (result) {
                layer.msg(result.msg);
            }
        });
    }
</script>
<style>
</style>
</html>
